<template>
    <div>
        <trendData :date-value="dateValue" />
        <div class="parent mg-t-20">
            <div class="son">
                <el-date-picker size="small" v-model="dateValue" type="month" value-format="YYYY-MM" :clearable="false"
                    placeholder="请选择月份" @change="handleDateChange" />
            </div>
            <div class="tab-box flex gap-16">
                <div class="tab-item pointer" :class="{ 'active': activeName === 'pay' }" @click="toggle('pay')">发薪趋势</div>
                <div class="tab-item pointer" :class="{ 'active': activeName === 'advance' }" @click="toggle('advance')">
                    预支趋势
                </div>
            </div>
            <trendChart v-if="activeName === 'pay'" ref="pay" :option="payOption" />
            <trendChart v-if="activeName === 'advance'" ref="advance" :option="advanceOption" />
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus';
import {
    getPayTrend,
} from '@/api/home'
import { queryAdvanceTrend } from '@/api/advance.ts';
import trendData from './trend-data.vue';
import trendChart from './trend-chart.vue';
import dayjs from 'dayjs'
const curMonth = dayjs().format('YYYY-MM')

export default defineComponent({
    components: {
        trendData,
        trendChart
    },
    data() {
        return {
            activeName: 'pay',
            dateValue: curMonth,
            payOption: {},
            advanceOption: {}
        }
    },
    mounted() {
    },
    beforeMount() {
        this.getData()
        this.getAdvanceData()
    },
    methods: {
        toggle(name: string) {
            this.activeName = name
            this.$nextTick(() => {
                if (this.activeName === 'pay') {
                    (this as any).getData()
                    (this as any).$refs.pay.init(this.payOption)
                } else if (this.activeName === 'advance') {
                    (this as any).getAdvanceData()
                    (this as any).$refs.advance.init(this.advanceOption)
                }
            })
        },
        getData() {
            getPayTrend({
                queryMonth: this.dateValue
            }).then(res => {
                if (res?.list?.length) {
                    this.payOption = {
                        title: {
                            text: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['发薪', '领薪'],
                            left: 'left',
                            top: '15px'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: res.list.map(i => i.date)
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '发薪',
                                type: 'line',
                                smooth: true,
                                data: res.list.map(i => i.payTotalMoney)
                            },
                            {
                                name: '领薪',
                                type: 'line',
                                smooth: true,
                                data: res.list.map(i => i.payReceiveTotalMoney)
                            },
                        ]
                    }
                }
            })
        },
        getAdvanceData() {
            queryAdvanceTrend({
                queryMonth: this.dateValue
            }).then((res: any) => {
                console.log(66666, res);
                this.advanceOption = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['领薪', '预支'],
                        left: 'left',
                        top: '15px'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: res.date
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '领薪',
                            type: 'line',
                            smooth: true,
                            data: res.totalSalaryMoney
                        },
                        {
                            name: '预支',
                            type: 'line',
                            smooth: true,
                            data: res.totalAdvanceMoney
                        },
                    ]
                }
            })
        },
        handleDateChange() {
            if (this.activeName === 'pay') {
                this.getData()
            } else if (this.activeName === 'advance') {
                this.getAdvanceData()
            }
        }
    }
})
</script>
<style lang="stylus" scoped>
.parent
    position relative
    background #F7F8FC
    padding 12px 16px
    border-radius 8px
.son
    position absolute
    right 16px
    top 10px
    z-index 1
.tab-item
    height 32px
    line-height 32px
    text-align center
    border 1px solid #E8E9EA
    border-radius 4px
    padding 0 12px
    user-select none
    background #fff
.active
    background #1989FA
    border-color #1989FA
    color #fff
    font-size 16px
</style>